<template>
  <div>
    <div class="btn-group-wrapper bottom">
      <el-button-group>
        <el-button type="primary" icon="plus" @click="addHandler">公告添加</el-button>
        <el-button type="primary" icon="delete" @click="delHandler">删除</el-button>
        <el-button type="primary" icon="star-on" @click="topHandler">置顶</el-button>
      </el-button-group>
    </div>
    <el-table ref="newsTable" :data="getAffiches" border height="500" :stripe="true" :highlight-current-row="true"
              @selection-change="handleSelectionChange"
              style="width: 100%">
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column inline-template label="置顶" width="60">
        <span v-if="row.isUp==true">
          <el-button size="small" type="warning" @click="downHandle($index,row)">置顶</el-button>
        </span>
      </el-table-column>
      <el-table-column
        prop="title"
        :show-overflow-tooltip="true"
        label="标题"
        width="400">
      </el-table-column>
      <el-table-column
        prop="publishTime"
        :formatter="formatPTime"
        label="发布时间">
      </el-table-column>
      <el-table-column
        prop="endTime"
        :formatter="formatETime"
        label="下线时间">
      </el-table-column>
      <el-table-column
        prop="publisher"
        width="80"
        label="发布人">
      </el-table-column>
      <el-table-column
        prop="location"
        width="80"
        label="发布位置">
      </el-table-column>
      <el-table-column inline-template label="控制" width="130">
      <span>
        <el-button type="info" size="small" @click="deleteItemHandler($index,row)">删除</el-button>
        <el-button type="info" size="small" @click="editItemHandler($index, row)">修改</el-button>
      </span>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getSysAfficheCurrentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getSysAfficheTotalCount">
      </el-pagination>
    </div>
    <el-alert
      title="目前分页只对不置顶项分页"
      type="success"
      :closable="false">
    </el-alert>
  </div>
</template>
<script>

  import { mapActions, mapGetters } from 'vuex'
  import moduleStore from './bll/store'
  import store from '../../store'
  import dateUtil from '../../common/dateUtil';
  import assignDeep from 'assign-deep';
  (!store.state.sysAffiches) && store.registerModule('sysAffiches', moduleStore)
  export default {
    data() {
      return {
        multipleSelection: [],
        pageSize: 10
      }
    },
    computed: {
      ...mapGetters(['getAffiches', 'getSysAfficheCurrentPage', 'getSysAfficheTotalCount'])
    },
    mounted() {
      this.setEditingAffiche({});
      this.setPageModel('ADD');
      //TODO 请求数据以后可以在created中做
      this.initPage();
    },
    methods: {
      ...mapActions(['queryUpAffiches', 'querySysAffiches', 'batchDeleteAffiches', 'deleteAffiche', 'setEditingAffiche', 'setPageModel', 'updateAffiche']),
      initPage() {
        this.querySysAffiches().then(() => {
          this.queryUpAffiches();
        });
      },
      formatPTime(row, column) {
        if (row.publishTime) {
          return dateUtil.getDateTime(new Date(row.publishTime));
        } else {
          return '';
        }
      },
      formatETime(row, column) {
        if (row.endTime) {
          return dateUtil.getDateTime(new Date(row.endTime));
        } else {
          return '';
        }
      },
      addHandler() {
        this.setPageModel('ADD');
        this.$router.push('/affiche/add');
      },
      downHandle(index, row) {
        this.$confirm('此操作将取消置顶该公告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let data = assignDeep({}, row);
          data.isUp = false;
          delete data.publisher;
          this.updateAffiche(data).then(() => {
            this.$message.warning('取消置顶成功');
            this.initPage();
          })
        });
      },
      topHandler() {
        let len = this.multipleSelection.length;
        let data = assignDeep({}, this.multipleSelection[0]);
        let warning = this.$message.warning;
        if (len === 0) {
          warning('请选择要置顶的条目');
        } else if (len > 1) {
          warning('目前不能多项操作');
        } else {
          if (data.isUp === false || data.isUp === undefined) {
            data.isUp = true;
            delete data.publisher;
            this.updateAffiche(data).then(() => {
              warning('置顶成功');
              this.initPage();
            })
          } else {
            warning('此项已置顶');
          }
        }
      },
      deleteConfirm(fun, params) {
        this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          fun(params).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initPage()
          });
        });
      },
      delHandler() {
        if (this.multipleSelection.length === 0) {
          this.$message.warning('请选择要删除的条目');
        } else if (this.multipleSelection.length > 1) {
          this.deleteConfirm(this.batchDeleteAffiches, this.multipleSelection);
        } else {
          this.deleteConfirm(this.deleteAffiche, this.multipleSelection[0]);
        }
      },
      editItemHandler(index, row) {
        //设置要修改的内容
        this.setPageModel('UPDATE');
        this.setEditingAffiche(row);
        this.$router.push('/affiche/add');
      },
      deleteItemHandler(index, row) {
        this.deleteConfirm(this.deleteAffiche, row);
      },
      handleSelectionChange(val) {
        //val: [{信息}]
        this.multipleSelection = val;
      },
      handleSizeChange (val) {
        this.pageSize = val;
        this.querySysAffiches({index: 1, size: val}).then(() => {
          this.queryUpAffiches();
        });
      },
      handleCurrentChange (val) {
        this.querySysAffiches({index: val, size: this.pageSize}).then(() => {
          this.queryUpAffiches();
        });
      }
    }
  }
</script>
<style>
</style>
